<template>
  <div class="profile-page">
    <van-cell-group v-show="$route.name === 'userCenter'">
      <van-cell :title="$t('profile.avatar')" title-class="strong" is-link>
        <input
          type="file"
          name
          id
          class="upload"
          accept="image/*"
          @change="uploadAvatar"
        />
      </van-cell>
      <van-cell
        :title="$t('profile.nickname')"
        title-class="strong"
        :value="userInfo.nickname"
        is-link
        :to="{ name: 'updateName' }"
      ></van-cell>
      <van-cell
        :title="$t('profile.sex')"
        :value="getSex"
        title-class="strong"
        is-link
        @click="openPicker"
      ></van-cell>
      <van-cell
        :title="$t('profile.signature')"
        title-class="strong"
        is-link
        :to="{ name: 'updateSignature' }"
        :value="userInfo.signature"
      ></van-cell>
      <van-cell
        :title="$t('education.background')"
        title-class="strong"
        is-link
        :to="{ name: 'myEducation' }"
      ></van-cell>
      <van-cell
        :title="$t('profile.phone')"
        title-class="strong"
        :value="userInfo.telephone"
      ></van-cell>
    </van-cell-group>
    <van-popup
      v-model="showPicker"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-picker
        :columns="sexColumn"
        show-toolbar
        :default-index="defaultIndex"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      ></van-picker>
    </van-popup>
    <router-view
      :nickname="userInfo.nickname"
      @updateNickname="updatename"
    ></router-view>
  </div>
</template>

<script>
import { Cell, CellGroup, Popup, Picker } from 'vant';
import 'vant/lib/uploader/style/less';
import 'vant/lib/picker/style/less';
import { mapState, mapMutations } from 'vuex';

export default {
    name: 'profileInfo',
    components: {
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [Popup.name]: Popup,
        [Picker.name]: Picker
    },
    data () {
        return {
            defaultIndex: 0,
            showPicker: false,
            sexColumn: ['保密', '男', '女']
        };
    },
    methods: {
        onConfirm (value) {
            this.showPicker = false;
            let subIndex = '';
            subIndex = this.sexColumn.findIndex(item => item === value);
            const params = {
                params: {
                    sex: subIndex
                },
                id: localStorage.getItem('id')
            };
            this.$util.loadingToast();
            this.$api.userApi
                .updateUserInfo(params)
                .then(() => {
                    this.$util.successToast();
                    this.overRideValue({
                        state: 'userInfo',
                        value: { sex: subIndex }
                    });
                })
                .catch(error => {
                    this.$util.failToast(error.message);
                });
        },
        updatename (value) {
            this.overRideValue({ state: 'userInfo', value: { nickname: value } });
        },
        uploadAvatar (event) {
            const formData = new window.FormData();
            this.$util.loadingToast();
            formData.append('avatar', event.target.files[0]);
            const params = {
                method: 'put',
                url: '/api/v1/profile/avatar',
                data: formData,
                headers: {
                    'Content-Type': 'multipart/form-data'
                },
                params: {
                    id: this.userInfo._id,
                    phone: this.userInfo.telephone
                }
            };
            this.$api.userApi
                .avatar(params)
                .then(res => {
                    if (res.code === 20000) {
                        this.$util.successToast();
                        this.overRideValue({
                            state: 'userInfo',
                            value: { avatar: res.imageUrl }
                        });
                    } else {
                        const msg = res.code === 4035 ? res.message : '头像更新失败';
                        this.$util.failToast(msg);
                    }
                })
                .catch(err => {
                    throw err;
                });
        },
        openPicker () {
            this.showPicker = true;
            this.defaultIndex = this.sexColumn.findIndex(d => d === this.getSex);
        },
        ...mapMutations(['simpleAssignment', 'resetStatus', 'overRideValue'])
    },
    computed: mapState({
        userInfo: state => state.userInfo,
        getSex () {
            return this.sexColumn[this.userInfo.sex];
        }
    })
};
</script>

<style scoped lang="less" src="./less/user-center.less"></style>
